<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>Dynamic Time</title>
  <script src="./static/i.min.js"></script>
  <script src="./js/sakura.js"></script>
  <script src="https://unpkg.com/lunisolar@2.1.0/dist/lunisolar.js"></script>
  <style id="root_color">
    :root {
      --root-color: rgb(194 201 250);
    }
  </style>
  <style>
    @font-face {
      font-family: "hs";
      src: url("./static/hs.woff2");
    }

    p,
    span,
    div,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-family: "hs";
    }

    #time-display {
      font-size: 300px;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 70vh;
      color: var(--root-color);
      user-select: none;
      transition: color 0.5s ease-in-out;
      z-index: 7;
      position: relative;
      font-weight: bolder;
    }

    #chinese-date {
      display: flex;
      font-size: 50px;
      justify-content: center;
      align-items: center;
      color: var(--root-color);
      user-select: none;
      transition: color 0.5s ease-in-out;
      z-index: 8;
      position: relative;
      font-weight: bolder;
    }

    #sentence::after {
      content: "";
      display: inline-block;
      width: 4px;
      height: 40px;
      margin-bottom: -5px;
      border-radius: 3px;
      margin-left: 3px;
      background: var(--root-color);
      animation: ss .9s infinite;
    }


    @keyframes ss {
      0% {
        background-color: var(--root-color);
      }

      50% {
        background-color: transparent;
      }

      100% {
        background-color: var(--root-color);
      }
    }

    #sentence {
      font-size: 40px;
      text-align: center;
      color: var(--root-color);
      height: 5vh;
      user-select: none;
      transition: color 0.5s ease-in-out;
      z-index: 9;
      position: relative;
      font-weight: bolder;
    }

    body {
      transition: all 1s ease-in;
    }

    canvas {
      z-index: -1;
    }

    #class-sheet {
      position: absolute;  
      width: 70px;  
      height: 980px;  
      background-color: rgba(255, 255, 255, 0.8); /* 半透明黑色 */  
      z-index: 10; /* 确保这个元素在其他元素之上 */  
      right: 0;
      border-radius: 15px 0 0 15px;
      top: 45px;
    }

    #lesson {
      width: 70px;
      height: 70px;
      text-align: center;
      line-height: 70px;
      font-size: 30px;
      font-weight: bold;
      color: rgb(100, 100, 100);
      border-bottom: solid;
      box-sizing: border-box;
      user-select: none;
    }
  </style>
</head>

<body>
  <div id="chinese-date"></div>
  <div id="sentence"></div>
  <div id="time-display"></div>

  <div id="class-sheet"></div>
</body>
<script src="./js/index.js"></script>

</html>